<template>
  <div class="module">
    <!--实时告警-->
    <MTitle ref="title" icon="ssgj" :filter="false"></MTitle>
    <MBox boxCls="box2">
      <div class="box" :class="{'kong':dataList.length === 0}">
        <ScrollList :data="dataList" empty-text="劳保用品穿戴全，安全上岗无危险。">
          <ul class="ul">
            <li class="li" v-for="(item,index) in dataList" :key="index" @click="jump(item)">
              <div class="content-box">
                <!--                <div class="line">-->
                <!--                  <div class="comp">{{ item.tenantName }}</div>-->
                <!--                </div>-->

                <div class="line">
                  <div class="name">{{ item.shipName }}</div>
                  <div class="text">{{ item.shipMmsi }}</div>
                </div>
                <div class="line">
                  <div class="text scroll">
                    <ScrollListX :data="item.typeName">
                      <span class="text" style="padding: 0 5px">{{ item.typeName }}</span>
                    </ScrollListX>
                  </div>
                  <div class="time">{{ item.createTime }}</div>
                  <div class="btn">{{ levelObj[item.level] }}</div>
                </div>
              </div>
            </li>
          </ul>
        </ScrollList>
      </div>
    </MBox>
  </div>
</template>

<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import ScrollList from '../base-com/scroll-list/scroll-list'
import { rtWarningList } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'
import ScrollListX from '../base-com/scroll-list/scroll-list-x'

export default {
  mixins: [shipMixin],
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  components: {
    MTitle,
    MBox,
    ScrollList,
    ScrollListX
  },
  data() {
    return {
      time: 10,
      width: 287,
      dataList: [],
      levelObj: {
        '1': '一级告警',
        '2': '二级告警',
        '3': '三级告警',
      }
    }
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = {}
      searchData.shipId = this.shipId
      rtWarningList(searchData).then(res => {
        this.dataList = res.result || []
      })
    },
    jump(row) {
      if (this.type === 'anji') {
        window.open("/modules/maintenance/video/warnMessage/detail?id=" + row.id)
      } else if (this.type === 'jianguan') {
        window.open("/warning/detail?id=" + row.id)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  padding: 15px 0;
  .ul {
    width: 100%;
    padding-left: 10px;
    .li {
      cursor: pointer;
      width: 349px;
      height: 59px;
      background: url("./images/bg.png");
      background-size: 100% 100%;
      margin-bottom: 14px;
      .content-box {
        width: 100%;
        height: 100%;
        padding: 10px 20px 10px 26px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .line {
          display: flex;
          justify-content: space-between;
          position: relative;
          .comp {
            width: 100%;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            line-height: 16px;
          }
          .name {
            color: rgba(143, 239, 255, 0.8);
            font-size: 16px;
            height: 20px;
            line-height: 20px;
          }
          .text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            height: 20px;
            line-height: 20px;
            &.scroll {
              width: 100px;
            }
          }
          .time {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 141-23-10px;
          }
        }
        .btn {
          width: 80px;
          height: 24px;
          line-height: 24px;
          background: url("./images/box.png") no-repeat center;
          background-size: 100% 100%;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(0, -50%);
          font-size: 14px;
          color: #8FEFFF;
          text-align: center;
        }
      }
    }
  }
  &.kong {
    padding: 20px 15px;
  }
}

</style>
